<template>
  <div>
    <!-- 最外层设置容器的高度 -->
    <el-container style="height: 700px; border: 1px solid #eee">
      <!-- 顶部标题 -->
      <el-header
        style="
          font-size: 40px;
          background-color: rgb(238, 241, 246);
          line-height: 60px;
        "
      >
        智能员工管理系统</el-header
      >
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统信息管理</template
              >
              <!-- 路由跳转的连接组件 -->
              <router-link to="/dept">
                <el-menu-item index="1-1">部门管理</el-menu-item>
              </router-link>

              <router-link to="/emp">
                <el-menu-item index="1-2">员工管理</el-menu-item>
              </router-link>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 内容需要动态展示 先写在一个组件中引入 -->
          <!-- <emp-view></emp-view> -->

          <!-- 展示路由对应的组件 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import EmpView from "./views/manager/EmpView.vue";
export default {
  name: "App",
  components: { EmpView },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>